<template>
  <div id="communityDetail" class="same-change-oldstyle">
    <div class="same-head-box" style="border-bottom:0px">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>园区管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/communityList' }">园区</el-breadcrumb-item>
            <el-breadcrumb-item>详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
          <button class="same-search-btns" @click="returnBack">返回</button>
        </div>
      </div>
    </div>
    <div class="communityDetail">
        <div class="detail-box">
            <div class="detail-head"> <img src="../../../static/images/oC-icon6.png" width="15px"/> 园区信息</div>
            <div class="detail-body">
                <div class="detail-cont">
                    <div class="detail-list">园区名称：{{data_all.village_name}}</div>
                    <div class="detail-list">园区类型:{{data_all.village_type_name}}</div>
                    <div class="detail-list">园区地址：{{data_all.address}}</div>
                </div>
            </div>
        </div>
        <div class="detail-box">
            <div class="detail-head"> <img src="../../../static/images/oC-icon3.png" width="14px" /> 园区信息</div>
            <div class="detail-body">
                <div class="detail-cont">
                    <div class="detail-list">区域码：{{data_all.area_code_name?data_all.area_code_name:'--'}} <span v-if="data_all.area_code">({{data_all.area_code}})</span></div>
                    <div class="detail-list">备案检查：{{data_all.check_record_card == 1?'已开启':'未开启'}}({{data_all.check_record_card_time}})</div>
                    <div class="detail-list">水卡阈值金额：{{data_all.threshold_value}}</div>
                    <div class="detail-list">水卡阈值提醒：{{data_all.threshold_on==1?'开启':'关闭'}}</div>
                    <div class="detail-list">水卡低余额比例提醒：{{data_all.prompt_on==1?'开启':'关闭'}}  <span v-if="data_all.prompt_on==1">(低于{{data_all.prompt_value}}%提醒)</span> </div>
                    <div class="detail-list">价格模板：{{data_all.sell_water_title}} 
                        (<span class="ltte-hint" v-if="data_all.sell_template_type == 1 && data_all.sell_overdue">{{ data_all.sell_start_time.slice(0, 10) }}—{{ data_all.sell_end_time.slice(0, 10) }}</span>
									<span class="ltte-hint" v-else-if="data_all.sell_template_type == 1 && !data_all.sell_overdue">{{ data_all.sell_start_time.slice(0, 10) }}—{{ data_all.sell_end_time.slice(0, 10) }}</span>
									<span class="ltte-hint" v-else-if="data_all.sell_template_type == 2">永久使用</span>
									<span class="ltte-hint" v-else>——</span>)</div>
                    <div class="detail-list">用户自助充值模板：{{data_all.template_title}}(
                        <span class="ltte-hint" style="color: red" v-if="data_all.template_type == 1 && data_all.overdue">{{ data_all.start_time.slice(0, 10) }}—{{ data_all.end_time.slice(0, 10) }}</span>
										<span class="ltte-hint" v-else-if="data_all.template_type == 1 && !data_all.overdue">{{ data_all.start_time.slice(0, 10) }}—{{ data_all.end_time.slice(0, 10) }}</span>
										<span class="ltte-hint" v-else-if="data_all.template_type == 2">永久使用</span>
										<span class="ltte-hint" v-else>——</span>)</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { regionDataPlus, CodeToText } from "element-china-area-data";

export default {
  name: "communityDetail",
  data: function() {
    return {
      id : this.$route.query.id,
      data_all:[]
    };
  },
  inject: ["reload"],
  methods: {
    RefreshFun() {
      // 调用reload方法，刷新整个页面
      this.reload();
    },
    //返回
    returnBack() {
      this.$router.back(-1);
    },
    //园区信息查询
    villageInfo() {
      var that = this;
      // Ajax请求
      that.$post({
        url: "Partner/Village/getVillage",
        data: {
          id: that.id
        },
        success: data => {
          if (data.code == 1000) {
            that.data_all = data.data;
          } else {
            that.$message.error(data.message);
          }
        }
      });
    },
  },
  mounted() {
    this.villageInfo();
  },
  created() {
  }
};
</script>

<style scoped>
#communityDetail{
    width: 100%;
    height: 100%;
    background-color:#FAFAFA;
}
#communityDetail .communityDetail{
    background: #FAFAFA;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
}
#communityDetail .detail-box{
    width: 100%;
    margin-top: 20px;
    background: #FFFFFF;
    padding: 20px 30px;
    box-sizing: border-box;
}
#communityDetail .detail-head{
    font-size: 16px;
    font-weight: 500;
    color: #2D5686;
}
#communityDetail .detail-head img{
    padding-right: 8px;
}
#communityDetail .detail-body{
    width: 100%;
    padding: 14px 25px 0px 25px;
    box-sizing: border-box;
}
#communityDetail .detail-cont{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    border-top:1px solid #F3F3F3;
    padding-top: 25px;
}
#communityDetail .detail-list{
    width: 25%;
    padding:0px 10px 25px 0px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    color: #4D4D4D;

}
</style>
